<template>
  <div class="Mbanner">
    <el-carousel height="3rem" autoplay>
      <el-carousel-item v-for="item in bannerdata" :key="item.id">
        <div class="home_banner_item">
          <img style="width:100%;height:100%" :src="base + item.pjname" alt="" />
          <div class="home_banner_text">{{item.con}}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { findBanner } from '../api/api'
export default defineComponent({
  name: 'Mbanner',
  setup() {
    const bannerdata = ref([
      {
        id: '10',
        name: 'flutter学习',
        con: '开始学习flutter',
        pjname: 'cc',
        time: '2020-04-08 18:14:11',
        sta: '1',
        fcon: 'flutter学习',
        see: '20',
      },
    ])
    onMounted(() => {
      findBanner().then((data) => {
        bannerdata.value = data
      })
    })
    return {
      bannerdata,
    }
  },
})
</script>
<style lang="scss" scoped>
  .Mbanner{
    .home_banner_item{
      position: relative;
      height: 100%;
      .home_banner_text{
       position: absolute;
       font-size: 0.30rem;
       top: 60%;
       text-align: center;
       width: 100%;
       color: white;
       z-index: 2000;
      }
    }
  }
</style>
